<template>
	<u-overlay :show="show" opacity=".5">
		<view class="warp">
			<view style="position: relative;width: 45px;">
				<text></text>
				<text></text>
				<text></text>
				<text></text>
				<text></text>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		name:"m-loading",
		props: ['show'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	// .u-transition{
	// 	background-color: #fff!important
	// }
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.warp text{
		display:block;
		bottom:0px;
		width: 9px;
		height: 5px;
		background:$incolor-3;
		
		position:absolute;
		-webkit-animation: animation 1.5s	infinite ease-in-out;
		-moz-animation: animation 1.5s	infinite ease-in-out;
		-ms-animation: animation 1.5s	infinite ease-in-out;
		-o-animation: animation 1.5s	infinite ease-in-out;
		animation: animation 1.5s	 infinite ease-in-out;
	}
	.warp text:nth-child(2){
		left:11px;
		-webkit-animation-delay: .2s;
		-moz-animation-delay: .2s;
		-ms-animation-delay: .2s;
		-o-animation-delay: .2s;
		animation-delay: .2s;
	}
	.warp text:nth-child(3){
		left:22px;
		-webkit-animation-delay: .4s;
		-moz-animation-delay: .4s;
		-ms-animation-delay: .4s;
		-o-animation-delay: .4s;
		animation-delay: .4s;
	}
	.warp text:nth-child(4){
		left:33px;
		-webkit-animation-delay: .6s;
		-moz-animation-delay: .6s;
		-ms-animation-delay: .6s;
		-o-animation-delay: .6s;
		animation-delay: .6s;
	}
	.warp text:nth-child(5){
		left:44px;
		-webkit-animation-delay: .8s;
		-moz-animation-delay: .8s;
		-ms-animation-delay: .8s;
		-o-animation-delay: .8s;
		animation-delay: .8s;
	}
	
	@-webkit-keyframes animation {
	    0% {height:5px;-webkit-transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;-webkit-transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;-webkit-transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;-webkit-transform:translateY(0px);background:$incolor-3;}
	}
	
	@-moz-keyframes animation {
	    0% {height:5px;-moz-transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;-moz-transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;-moz-transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;-moz-transform:translateY(0px);background:$incolor-3;}
	}
	
	@-ms-keyframes animation {
	    0% {height:5px;-ms-transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;-ms-transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;-ms-transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;-ms-transform:translateY(0px);background:$incolor-3;}
	}
	
	@keyframes animation {
	    0% {height:5px;transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;transform:translateY(0px);background:$incolor-3;}
	}
	
</style>